<template>
    <div>
        <el-tooltip :content="$t('msg.navBar.guide')">
            <svg-icon id="guide-start" @click.native="onClick" icon="guide"></svg-icon>
        </el-tooltip>

    </div>
</template>

<script>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from "./step"
import i18n from "../../i18n/index"
export default {
    name: '',

    data() {
        return {
            driver:null
        };
    },

    mounted() {
        this.driver=new Driver({
            allowClose:false,
            closeBtnText:i18n.t('msg.guide.close'),
            nextBtnText:i18n.t('msg.guide.next'),
            prevBtnText:i18n.t('msg.guide.prev')
        })


    },

    methods: {
        onClick(){
            this.driver.defineSteps(steps(i18n))
            this.driver.start()
        }
    },
};
</script>

<style lang="scss" scoped>
</style>